function DetailUI(title){

    this.model              = new Object();

    this.titleContainer     = new Object();
    this.title              = title;
    this.titleOp            = {add: "Agregar", del: "Borrar", edit: "Modificar"};
    this.operation          = new Object();

    this.messageContainer   = new Object();

    this.addButton          = new Object();
    this.editButton         = new Object();
    this.delButton          = new Object();

    this.fields             = new Array();

    this.okButton           = new Object();
    this.cancelButton       = new Object();

    this.onAddListeners     = new Array();
    this.onEditListeners    = new Array();
    this.onDelListeners     = new Array();

    this.setModel = function(model){
        this.model = model;
        this.model.addOnRowLoadListener(this.onRowLoad, this);
        this.model.addOnValidationErrorListener(this.showError, this);
        this.model.addOnSaveListener(this.onSave, this);
    };

    this.getModel = function(){
        return this.model;
    };

    this.setTitleContainer = function(container){
        this.titleContainer = container;
    };

    this.setMessageContainer = function(container){
        this.messageContainer = container;
    };

    this.setAddButton = function(button){
        this.addButton = button;
        
        var _this = this;
        $(button).click(function(){
            _this.add();
        });
    };

    this.setEditButton = function(button){
        this.editButton = button;

        var _this = this;
        $(button).click(function(){
            _this.edit();
        });
    };

    this.setDelButton = function(button){
        this.delButton = button;

        var _this = this;
        $(button).click(function(){
            _this.del();
        });
    };

    this.setOkButton = function(button){
        this.okButton = button;

        var _this = this;
        $(button).button();
        $(button).click(function(){
            _this.save();
        });
    };

    this.setCancelButton = function(button){
        this.cancelButton = button;
    };

    this.addField = function(control, entityName, column, type, minLength, optional){

        var _this = this;
        if(type == "date"){
            $(control).datepicker(getDatePickerOptions());

            $(control).change(function(){
                _this.setColumnValue(this, unformatDate($(control).val()));
            });

            $(control).datepicker("setDate", $(control).val());
        }else{
            $(control).change(function(){
                _this.setColumnValue(this, $(this).val());
            });
        }

        var newField = {
            control: control,
            entityName: entityName,
            column: column,
            type: type,
            minLength: minLength,
            optional: optional
        };

        if(control.tagName == "TEXTAREA"){
            newField.editor = $(control).cleditor({width: "100%", height: 250})[0];
        }

        this.fields[this.fields.length] = newField;

        this.model.addColumn(entityName, column, type, minLength, optional);

    };

    this.setColumnValue = function(control, value){
        for(var i=0; i<this.fields.length; i++){
            var field = this.fields[i];
            if(field.control == control){
                this.model.setColumnValue(field.entityName, field.column, value);
            }
        }
    }

    this.setOperation = function(op){
        if(this.model.setOperation(op)){
            this.operation = this[op+"Send"];
            this.updateTitle();
        }
    };

    this.showRow = function(data, model, context){
        for(var i=0; i<context.fields.length; i++){
            var field = context.fields[i];
            var val = data.data[0][field.entityName][field.column];

            $(field.control).val(val);

            if($(field.control).attr("type") == "checkbox"){
                if(val == "1"){
                    $(field.control).attr("checked", "checked");
                    $(field.control).val("1");
                }else{
                    $(field.control).removeAttr("checked");
                    $(field.control).val("0");
                }
            }
            //context.setColumnValue(field.control, $(field.control).val());
            if(field.type == "date"){
                $(field.control).val(formatDate(val));
                //actualizarFecha($(field.control).attr("id"));
            }

            if($(field.control).get(0).tagName == "TEXTAREA"){
                //alert(field.editor);
                field.editor.updateFrame(val);
                //field.editor.refresh();
            }
        }
    }

    this.enableFields = function(enabled){
        for(var i=0; i<this.fields.length; i++){
            var field = this.fields[i];

            if(enabled){
                $(field.control).parent().find("input").removeAttr("disabled");
                $(field.control).parent().find("select").removeAttr("disabled");
            }else{
                $(field.control).parent().find("input").attr("disabled", "disabled");
                $(field.control).parent().find("select").attr("disabled", "disabled");
            }
        }
    }

    this.clearFields = function(){
        for(var i=0; i<this.fields.length; i++){
            var field = this.fields[i];
            $(field.control).val("");

            if($(field.control).attr("type") == "checkbox" || $(field.control).attr("type") == "radio"){
                $(field.control).attr("value", "0");
                $(field.control).removeAttr("checked");
            }

            if($(field.control).get(0).tagName == "TEXTAREA"){
                field.editor.clear()
            }

            $(field.control).change();
        }
    }

    this.updateTitle = function(){
        $(this.titleContainer).text(this.titleOp[this.model.operation]+" "+this.title);
    }

    this.add = function(){
        $(this.messageContainer).text("");
        this.setOperation("add");
        this.enableFields(true);
        this.clearFields();
        this.model.idColumn.value = "";

        for(var i=0; i<this.onAddListeners.length; i++){
           this.onAddListeners[i].callback(this.onAddListeners[i].context);
        }
    }

    this.edit = function(){
        if(this.model.loadRow()){
            $(this.messageContainer).text("");
            this.setOperation("edit");
            this.enableFields(true);


            for(var i=0; i<this.onEditListeners.length; i++){
               this.onEditListeners[i].callback(this.onAddListeners[i].context);
            }
        }
    }

    this.del = function(){
        if(this.model.loadRow()){
            $(this.messageContainer).text("");
            this.setOperation("del");
            this.enableFields(false);

            for(var i=0; i<this.onDelListeners.length; i++){
               this.onDelListeners[i].callback(this.onAddListeners[i].context);
            }
        }
    }

    this.onRowLoad = function(data, model, context){
        if(context.model.operation == "add"){
            return;
        }
        if(context.model.operation == "edit"){
            context.showRow(data, model, context);
        }
        if(context.model.operation == "del"){
            context.showRow(data, model, context);
        }
    }

    this.save = function(){
        this.model.save();
    }

    this.onSave = function(data, model, context){
        if(data.result){
            model.load();
            if(model.operation == "add" || model.operation == "del"){
                context.add();
            }
            $(context.messageContainer).text("Los datos fueron guardados correctamente.");
        }else{
            $(context.messageContainer).text("Error al guardar los datos.")
        }
    }

    this.showError = function(context){
        for(var i=0; i<context.fields.length; i++){
            var field = context.fields[i];
            if(field.column == context.model.errorColumn.column &&
               field.entityName == context.model.errorColumn.entityName){

               $(field.control).focus();
            }
        }
        $(context.messageContainer).text(context.model.errorMsg);
        $(context.messageContainer).addClass("ui-state-error");
        $(context.messageContainer).addClass("ui-corner-all")
    }


    //// Listeners
    
    this.addOnAddListener = function(func, context){
        this.onAddListeners[this.onAddListeners.length] = {callback: func, context:context};
    };
    
    this.removeOnAddListener = function(func, context){        
        this.removeListener(this.onAddListeners, func, context);
    };

    this.addOnEditListener = function(func, context){
        this.onEditListeners[this.onEditListeners.length] = {callback: func, context:context};
    };

    this.removeOnEditListener = function(func, context){
        this.removeListener(this.onEditListeners, func, context);
    };

    this.addOnDelListener = function(func, context){
        this.onDelListeners[this.onDelListeners.length] = {callback: func, context:context};
    };

    this.removeOnDelListener = function(func, context){
        this.removeListener(this.onDelListeners, func, context);
    };

    this.removeListener = function(arrListener, func, context){
        var index = -1;
        for(var i=0; i<arrListener.length; i++){
            if(arrListener[i] != undefined){
                if(arrListener[i].context == context && arrListener[i].callback == func){
                    index = i;
                }
            }
        }

        if(index >= 0){
            delete arrListener[index];
        }
    }
  
};